{% extends "base_site.html" %} {% block title %} Network Builder {% endblock title %} {%
block stylesheets %} {{ super() }}
<link href="{{ url_for('static', filename='lib/vis/vis.min.css') }}" rel="stylesheet" />
<link href="{{ url_for('static', filename='css/builder.css') }}" rel="stylesheet" />
{% endblock stylesheets %} {% block content %}
<div class="controls">
  <div class="controls_mode navbar navbar-default navbar-color">
    <table class="table" cellspacing="0" style="margin: 0px;" width="100%">
      <tbody>
        <tr>
          <td style="text-align: center; vertical-align: middle;">
            <button
              type="button"
              class="btn btn-primary"
              onclick="action['Create new node']()"
              data-tooltip="Create New Node"
            >
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </td>
          <td style="min-width: 150px;">
            <select
              id="node-type-dd-list"
              class="form-control"
              data-width="150px"
              data-size="15"
            ></select>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">
            <button
              type="button"
              class="btn btn-primary"
              onclick="eNMS.builder.switchMode()"
              data-tooltip="Change Mode"
            >
              <span id="mode-icon" class="glyphicon glyphicon-move"></span>
            </button>
          </td>
          <td style="min-width: 150px;">
            <select
              id="edge-type-dd-list"
              class="form-control"
              data-width="150px"
              data-size="15"
            ></select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <nav
    class="navbar navbar-default navbar-custom navbar-color"
    style="padding-bottom: 2px;"
    role="navigation"
  >
    <div style="width: 100%; margin: 0px;">
      <select
        id="current-network"
        class="form-control"
        data-dropdown-align-right="true"
        data-size="20"
      ></select>
    </div>
    <ul class="pagination" style="margin: 0px; padding-top: 10px;">
      <li>
        <a
          onclick="action['Edit network']()"
          data-tooltip="Edit Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-edit cursor"></span
        ></a>
      </li>
      <li>
        <a
          onclick="action['Duplicate network']()"
          data-tooltip="Duplicate Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-duplicate"></span
        ></a>
      </li>
      <li>
        <a
          onclick="action['Create network']()"
          data-tooltip="Create Top Level Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-plus"></span
        ></a>
      </li>
      <li>
        <a
          onclick="action['Add to Network']()"
          data-tooltip="Add to Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-book"></span
        ></a>
      </li>
      <li>
        <a
          onclick="action['Create Label Button']()"
          data-tooltip="Create Label"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-font"></span
        ></a>
      </li>
      <li>
        <a onclick="action['Delete']()" data-tooltip="Delete" style="cursor: pointer;"
          ><span class="glyphicon glyphicon-trash"></span
        ></a>
      </li>
      <li>
        <a
          onclick="eNMS.builder.getTree()"
          data-tooltip="Network Tree"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-tree-conifer"></span
        ></a>
      </li>
      <li>
        <a
          onclick="action['Run Service']()"
          data-tooltip="Run Service"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-play"></span
        ></a>
      </li>
      <li>
        <a
          onclick="eNMS.builder.displayTextSearchField()"
          data-tooltip="Network Search"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-search"></span
        ></a>
      </li>
      <li>
        <a onclick="action['Zoom In']()" data-tooltip="Zoom In" style="cursor: pointer;"
          ><span class="glyphicon glyphicon-zoom-in"></span
        ></a>
      </li>
      <li>
        <a
          onclick="action['Zoom Out']()"
          data-tooltip="Zoom Out"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-zoom-out"></span
        ></a>
      </li>
      <li id="automatic-layout-btn">
        <a
          onclick="action['Automatic Layout']()"
          data-tooltip="Automatic Layout"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-flash"></span
        ></a>
      </li>
      <li id="left-arrow">
        <a
          onclick="action['Backward']()"
          data-tooltip="Previous Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-chevron-left"></span
        ></a>
      </li>
      <li id="up-arrow">
        <a
          onclick="action['Upward']()"
          data-tooltip="Switch to Parent Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-chevron-up"></span
        ></a>
      </li>
      <li id="right-arrow">
        <a
          onclick="action['Forward']()"
          data-tooltip="Next Network"
          style="cursor: pointer;"
          ><span class="glyphicon glyphicon-chevron-right"></span
        ></a>
      </li>
    </ul>
    <div
      id="network-search-div"
      class="input-group"
      style="width: 100%; margin-bottom: 5px; margin-top: 3px; display: none;"
    >
      <input
        id="network-search"
        type="text"
        placeholder="&#xF002;"
        class="form-control"
        style="font-family: Arial, FontAwesome;"
      />
    </div>
  </nav>
</div>
<div id="builder"></div>
<ul id="contextMenu" class="dropdown-menu" oncontextmenu="return false;" role="menu">
  <li class="menu-entry node-selection">
    <a tabindex="-1" href="#">Edit</a>
  </li>
  <li class="menu-entry node-selection">
    <a tabindex="-1" href="#">Duplicate</a>
  </li>
  <li class="menu-entry node-selection">
    <a tabindex="-1" href="#">Connect</a>
  </li>
  <li class="menu-entry node-selection">
    <a tabindex="-1" href="#">Configuration</a>
  </li>
  <li class="menu-entry node-selection">
    <a tabindex="-1" href="#">Results</a>
  </li>
  <li class="menu-entry node-selection">
    <a tabindex="-1" href="#">Run Service</a>
  </li>
  <li class="menu-entry node-selection network-selection">
    <a tabindex="-1" href="#">Enter network</a>
  </li>
  <li class="menu-entry divider node-selection">&nbsp</li>
  <li class="menu-entry node-selection edge-selection">
    <a tabindex="-1" href="#">Delete</a>
  </li>
  <li class="menu-entry edge-selection">
    <a tabindex="-1" href="#">Edit Edge</a>
  </li>
  <li class="menu-entry label-selection">
    <a tabindex="-1" href="#">Edit Label</a>
  </li>
  <li class="menu-entry label-selection">
    <a tabindex="-1" href="#">Delete</a>
  </li>
  <li class="menu-entry global">
    <a tabindex="-1" href="#">Create Label</a>
  </li>
</ul>
{% endblock content %} {% block javascripts %} {{ super()}}
<script src="{{ url_for('static', filename='lib/vis/vis.min.js') }}"></script>
{% endblock javascripts %}
